@import url("https://fonts.googleapis.com/css2?family=El+Messiri:wght@400..700&display=swap");

body {
  direction: rtl;
  font-family: "El Messiri", sans-serif;
}

:root {
  --ebhro3-container-width: 1440px;
  --ebhro3-white: #f5f5f5;
  --ebhro3-dark: #000000;

  --ebhro3-primary: #2373a7;
  --ebhro3-overlay: rgba(35, 115, 167, 0.08);

  --ebhro3-secondary: #96bf59;
  --ebhro3-site-color: 205, 26%, 20%;
  --ebhro3-gray: #cccccc;
  --ebhro3-whatsapp-color: #25d366;

  --ebhro3-space-xs: 0.4rem;
  --ebhro3-space-sm: 0.8rem;
  --ebhro3-space-md: 1.2rem;
  --ebhro3-space-lg: 2rem;
  --ebhro3-space-xl: 3rem;

  --ebhro3-fs-sm: 0.85rem;
  --ebhro3-fs-md: 1.1rem;
  --ebhro3-fs-lg: 1.125rem;

  /* ====== border radius === */
  --ebhro3-br-lg: 50px;
  /* ===== TRANSITION ===== */
  --ebhro3-transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
  direction: rtl;
}

a {
  text-decoration: none;
  color: inherit;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.ebhro3-hero {
  min-height: 70vh;

  display: flex;

  align-items: center;

  justify-content: center;

  background:
    linear-gradient(
      270deg,
      rgba(35, 115, 167, 0.88) 0%,
      rgba(35, 115, 167, 0.75) 30%,
      rgba(35, 115, 167, 0.55) 55%,
      rgba(35, 115, 167, 0.3) 75%,
      rgba(35, 115, 167, 0.15) 100%
    ),
    url("../../img/hero-image.webp") center / 90vw fixed;

  background-repeat: no-repeat;
  background-size: cover;

  /* إبقاء العناصر على اليسار */
  background-position: left center;

  background-attachment: scroll;

  padding-block: var(--ebhro3-space-md);

  width: 100%;
}

.ebhro3-container {
  max-width: var(--ebhro3-container-width);

  width: 100vw;

  width: 100%;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: start;

  /* border: 1px solid red; */
}

.ebhro3-content {
  width: 100%;

  /* border: 1px solid blue; */

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: var(--ebhro3-space-xl);

  align-items: center;

  justify-content: center;

  padding-inline: var(--ebhro3-space-sm);
}

.ebhro3-text-block {
  display: flex;
  align-items: start;
  justify-content: center;
  flex-direction: column;

  gap: var(--ebhro3-space-lg);

  /* border: 1px solid red; */
}

.ebhro3-title {
  font-size: clamp(1.5rem, 4vw, 3rem);

  font-weight: clamp(600, 2vw, 900);

  color: var(--ebhro3-white);
}

.ebhro3-title span {
  color: var(--ebhro3-secondary);
}

.ebhro3-description {
  font-size: clamp(var(--ebhro3-fs-md), 1.5vw, 1.4rem);

  color: var(--ebhro3-white);

  max-width: 520px;
}

.ebhro3-list {
  display: flex;

  flex-direction: column;

  gap: var(--ebhro3-space-xs);

  padding-right: var(--ebhro3-space-lg);

  font-weight: clamp(500, 2vw, 700);

  color: var(--ebhro3-white);
}

.ebhro3-list-item {
  font-size: var(--ebhro3-fs-lg);
}

.ebhro3-image-block {
  margin: 0% auto;

  display: flex;

  justify-content: center;

  position: relative;
}

.ebhro3-image-wrapper {
  position: relative;
}

.ebhro3-image {
  width: 100%;

  max-width: 420px;

  border-radius: var(--ebhro3-br-lg);

  animation: ebhro3-floating 4s ease-in-out infinite;
}

@keyframes ebhro3-floating {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-14px);
  }

  100% {
    transform: translateY(0);
  }
}

.ebhro3-floating-circle {
  position: absolute;

  width: 70px;

  height: 70px;

  border-radius: 50%;

  background: var(--ebhro3-secondary);

  opacity: 0.25;

  top: -40px;

  left: 0px;

  animation: ebhro3-rotate 18s linear infinite;
}

.ebhro3-floating-reverse {
  bottom: -10px;

  right: 5px;

  top: auto;

  left: auto;

  animation-direction: reverse;
}

@keyframes ebhro3-rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 768px) {
  .ebhro3-content {
    grid-template-columns: 1fr;
  }
}